<template>
  <el-form
    ref="queryForm"
    class="query-form"
    :model="queryForm"
    label-suffix="："
    inline
    size="small"
    status-icon
    label-position="right"
  >
    <el-form-item :prop="PROPS.userAccount">
      <el-input
        v-model.trim="queryForm[PROPS.userAccount]"
        class="common-query-form-item-width-sm"
        clearable
        :placeholder="`请输入${LABELS.userAccount}`"
        @clear="getDataList"
        @keydown.enter.native="getDataList"
      >
      </el-input>
    </el-form-item>

    <el-form-item :prop="PROPS.userName">
      <el-input
        v-model.trim="queryForm[PROPS.userName]"
        class="common-query-form-item-width-sm"
        clearable
        :placeholder="`请输入${LABELS.userName}`"
        @clear="getDataList"
        @keydown.enter.native="getDataList"
      >
      </el-input>
    </el-form-item>

    <el-form-item :prop="PROPS.gender">
      <el-select
        v-model="queryForm[PROPS.gender]"
        class="common-query-form-item-width-sm"
        :placeholder="LABELS.gender"
        clearable
        @change="getDataList"
      >
        <el-option
          v-for="item in $store.state.data.OPTION_MAP[OPTION_KEYS.gender]"
          :key="item.status"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </el-form-item>

    <el-form-item :prop="PROPS.phoneNumber">
      <el-input
        v-model.trim="queryForm[PROPS.phoneNumber]"
        class="common-query-form-item-width-sm"
        clearable
        :placeholder="`请输入${LABELS.phoneNumber}`"
        @clear="getDataList"
        @keydown.enter.native="getDataList"
      >
      </el-input>
    </el-form-item>

    <el-form-item :prop="PROPS.accountStatus">
      <el-select
        v-model="queryForm[PROPS.accountStatus]"
        class="common-query-form-item-width-sm"
        :placeholder="LABELS.accountStatus"
        clearable
        @change="getDataList"
      >
        <el-option
          v-for="item in $store.state.data.OPTION_MAP[OPTION_KEYS.accountStatus]"
          :key="item.status"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </el-form-item>

    <el-form-item>
      <t-button class="common-search-btn" type="primary" @click="getDataList">查 询</t-button>
    </el-form-item>
    <el-form-item>
      <t-button class="common-search-btn" type="default" plain @click="restForm">重 置</t-button>
    </el-form-item>
    <div class="relative -left-[16px] -top-[1px] mb-[16px] h-[1px] w-[calc(100%+32px)] bg-[#00000014]"></div>
    <div>
      <el-form-item>
        <t-button svgIcon="ic-btn-add" @click="addDetailDrawer">新增</t-button>
      </el-form-item>
      <el-form-item>
        <el-dropdown @command="handleTopCommand">
          <t-button svgIcon="ic-btn-batch" class="exportClass batch">批量操作</t-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="topDel" class="color-danger">批量删除</el-dropdown-item>
            <el-dropdown-item command="topResetPwd">重置密码</el-dropdown-item>
            <el-dropdown-item command="topReRole">关联角色</el-dropdown-item>
            <el-dropdown-item command="topFreeAccount">冻结账号</el-dropdown-item>
            <el-dropdown-item command="cancelTopFreeAccount">解除冻结</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-form-item>
    </div>
  </el-form>
</template>

<script>
import config from "../config";
import { systemUserDelete, systemUserPasswordReset, systemUserUpdateBatch, systemUserBatchRelieve } from "@/api/user";

export default {
  name: "QueryForm",
  components: {},
  props: {
    getDataList: {
      type: Function,
      required: true,
    },
    multipleSelection: {
      type: Array,
      default: () => [],
      required: true,
    },
    parentId: {
      default: null,
      required: true,
    },
    nodeId: {
      default: null,
      required: true,
    },
  },
  data() {
    return {
      ...config,
      queryForm: {
        [config.PROPS.userAccount]: "",
        [config.PROPS.userName]: "",
        [config.PROPS.gender]: "",
        [config.PROPS.phoneNumber]: "",
        [config.PROPS.accountStatus]: "",
      },
    };
  },
  computed: {},
  methods: {
    restForm() {
      Object.keys(this.queryForm).forEach((item) => {
        this.queryForm[item] = "";
      });
      this.getDataList(true);
    },
    async deletTenantUsers(list) {
      this.$confirm(`确定删除「${list["list"][0]}」吗？`, "确认信息", {
        type: "warning",
        cancelButtonClass: "common-confirm-cancel-btn",
        confirmButtonClass: "common-confirm-confirm-btn",
      })
        .then(async () => {
          await systemUserDelete(list);
          await this.getDataList();
          this.$message.success({
            message: "操作成功",
          });
        })
        .catch(() => {});
    },
    async passwordResetTenantUsers(list) {
      this.$confirm(`确认要重置密码「${list["list"][0]}」吗？`, "确认信息", {
        type: "warning",
        cancelButtonClass: "common-confirm-cancel-btn",
        confirmButtonClass: "common-confirm-confirm-btn",
      })
        .then(async () => {
          await systemUserPasswordReset(list);
          await this.getDataList();
          this.$message.success({
            message: "操作成功",
          });
        })
        .catch(() => {});
    },
    async updateBatchTenantUsers(list) {
      this.$confirm(`确认要冻结「${list["list"][0]}」吗？`, "确认信息", {
        type: "warning",
        cancelButtonClass: "common-confirm-cancel-btn",
        confirmButtonClass: "common-confirm-confirm-btn",
      })
        .then(async () => {
          await systemUserUpdateBatch(list);
          await this.getDataList();
          this.$message.success({
            message: "操作成功",
          });
        })
        .catch(() => {});
    },
    async cancaelUpdateBatchTenantUsers(list) {
      this.$confirm(`确认要解冻「${list["list"][0]}」吗？`, "确认信息", {
        type: "warning",
        cancelButtonClass: "common-confirm-cancel-btn",
        confirmButtonClass: "common-confirm-confirm-btn",
      })
        .then(async () => {
          await systemUserBatchRelieve(list);
          await this.getDataList();
          this.$message.success({
            message: "操作成功",
          });
        })
        .catch(() => {});
    },
    handleTopCommand(command) {
      if (this.multipleSelection.length == 0) {
        this.$message.error("请选择要操作的项");
        return;
      }
      if (command == "topDel") {
        //批量删除
        this.deletTenantUsers({
          list: this.multipleSelection.map((item) => item.username),
          departId: this.parentId ? this.parentId : this.nodeId,
        });
      } else if (command == "topResetPwd") {
        //重置密码
        this.passwordResetTenantUsers({
          list: this.multipleSelection.map((item) => item.username),
          departId: this.parentId ? this.parentId : this.nodeId,
        });
      } else if (command == "topReRole") {
        //关联角色
        this.$emit("addRolePermissions");
      } else if (command == "topFreeAccount") {
        //冻结账号
        this.updateBatchTenantUsers({
          list: this.multipleSelection.map((item) => item.username),
          departId: this.parentId ? this.parentId : this.nodeId,
        });
      } else if (command == "cancelTopFreeAccount") {
        this.cancaelUpdateBatchTenantUsers({
          list: this.multipleSelection.map((item) => item.username),
          departId: this.parentId ? this.parentId : this.nodeId,
        });
      }
    },
    addDetailDrawer() {
      this.$emit("addDetailDrawer");
    },
  },
};
</script>

<style lang="scss">
.batch {
  .svg-icon {
    width: 14px !important;
    height: 14px !important;
  }
}
</style>
